<template>
  <a-layout-sider
    id="sidebar"
    :class="['immich-scrollbar', 'group', 'relative', 'z-10', 'flex', 'w-18', 'flex-col', 'gap-1', 'overflow-y-auto', 'bg-immich-bg', 'pt-8', 'transition-all', 'duration-200', 'dark:bg-immich-dark-bg', 'hover:sm:w-64', 'hover:sm:border-r', 'hover:sm:pr-6', 'hover:sm:shadow-2xl', 'hover:sm:dark:border-r-immich-dark-gray', 'md:w-64', 'md:pr-6', 'hover:md:border-none', 'hover:md:shadow-none']"
    :collapsed="isCollapsed"
    :collapsible="true"
    @mouseenter="handleMouseEnter"
    @mouseleave="handleMouseLeave"
    :width="72"
    :collapsedWidth="64"
    theme="dark"
  >
    <slot></slot>
  </a-layout-sider>
</template>

<script>
export default {
  name: 'SideBarSection',
  data() {
    return {
      isCollapsed: true, // 控制侧边栏是否折叠
    };
  },
  methods: {
    handleMouseEnter() {
      this.isCollapsed = false; // 鼠标悬停时展开
    },
    handleMouseLeave() {
      this.isCollapsed = true; // 鼠标移出时折叠
    },
  },
};
</script>

<style scoped>
#sidebar {
  transition: all 0.2s ease-in-out;
}
</style>